<template>
    <view class="container">
        <!-- @scrolltolower="scrolltolower" -->
        <scroll-view scroll-y="true" class="scroll">
            <view >
                <view class="tab-radius">
                    <tabRadius
                        :list="['统计分析', '投保明细']"
                        :active="payIndex"
                        @change="onPayTab"
                        divided="100%"
                    />
                </view>
                <!-- 详细订单 -->
                <view class="record-list" v-if="payIndex === 1">
                    <view class="record-i">
                        <view class="i-info">
                            <view class="info-row row">
                                <view class="info-row-left"> 负责人： </view>
                                <text class="info-row-right">肖恩</text>
                            </view>
                            <view class="info-row row">
                                <view class="info-row-left"> 开通时间： </view>
                                <text class="info-row-right">2022-06-02 22:23</text>
                            </view>
                            <view class="info-row row">
                                <view class="info-row-left"> 备注： </view>
                                <text class="info-row-right">——</text>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 销售记录 -->
                <view class="operate-box" v-if="payIndex === 0">
                    <view class="operate">
                        <view class="operate-screen row">
                            <view class="title">全部保险公司</view>
                            <view class="row">
                                <view class="screen-i">
                                    100万专业版
                                    <image class="drop-down" src="@/static/drop-down.png" mode="scaleToFill" />
                                </view>
                                <view class="screen-i">
                                    <uni-datetime-picker v-model="rangeTime" type="daterange" @change="onRangeTime">
                                        12/12至12/30
                                        <image class="drop-down" src="@/static/drop-down.png" mode="scaleToFill" />
                                    </uni-datetime-picker>
                                </view>
                            </view>
                        </view>
                        <view >
                            <view class="box-list">
                                <view class="block-box-i block-box-i-active">
                                    <view class="title">
                                        保费（元）
                                    </view>
                                    <view class="num">
                                        <text class="company">￥</text>99999999
                                    </view>
                                </view>
                            </view>
                            <view class="box-list">
                                <view class="block-box-i">
                                    <view class="title">
                                        投保人数（人）
                                    </view>
                                    <view class="num">
                                        320
                                    </view>
                                </view>
                                <view class="block-box-i">
                                    <view class="title">
                                        报案数（个）
                                    </view>
                                    <view class="num">
                                        3
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="operate operate-top">
                        <view class="operate-title row">
                            <view class="title">发案统计</view>
                            <view class="operate-screen row">
                                <view class="screen-i">
                                    2022年6月
                                    <image class="drop-down" src="@/static/drop-down.png" mode="scaleToFill" />
                                </view>
                            </view>
                        </view>
                        <view class="operate-chart">
                            <qiun-data-charts
                                class="qiun-data-charts"
                                type="ring"
                                :opts="optsRing"
                                :chartData="chartsDataPie1"
                            />
                        </view>
                        <view class="operate-table">
                            <view class="table-title row">
                                <view class="title">保险方案</view>
                                <view class="title">保费</view>
                                <view class="title">占比</view>
                            </view>
                            <view class="table-cell row">
                                <view class="cell cell-active">
                                    <view class="colour-block"></view>
                                    30万专业版
                                </view>
                                <view class="cell">¥1000</view>
                                <view class="cell">25%</view>
                            </view>
                        </view>
                    </view>
                    <view class="operate operate-top">
                        <view class="operate-screen row">
                            <view class="title">全部保险公司</view>
                            <view class="screen-i">
                                <uni-datetime-picker v-model="rangeTime" type="daterange" @change="onRangeTime">
                                    12/12至12/30
                                    <image class="drop-down" src="@/static/drop-down.png" mode="scaleToFill" />
                                </uni-datetime-picker>
                            </view>
                        </view>
                        <view >
                            <view class="box-list">
                                <view class="block-box-i">
                                    <view class="title">
                                        开通客户
                                    </view>
                                    <view class="num">
                                        1890
                                    </view>
                                </view>
                                <view class="block-box-i">
                                    <view class="title">
                                        充值金额（元）
                                    </view>
                                    <view class="num">
                                        <text class="company">￥</text>309889
                                    </view>
                                </view>
                            </view>
                            <view class="box-list">
                                <view class="block-box-i">
                                    <view class="title">
                                        充值客户数
                                    </view>
                                    <view class="num">
                                        1326
                                    </view>
                                </view>
                                <view class="block-box-i">
                                    <view class="title">
                                        充值并使用的客户数
                                    </view>
                                    <view class="num">
                                        398
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="operate operate-top">
                        <view class="operate-screen row">
                            <view class="title">近七日开通趋势</view>
                            <view >
                                开通数
                            </view>
                        </view>
                        <view class="qiun-data-charts-bg">
                            <qiun-data-charts
                                class="qiun-data-charts "
                                type="column"
                                :opts="optsChart"
                                :chartData="chartData"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>
<script setup lang="ts" >
import { ref } from 'vue'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import uchartsOpts from '@/utils/ucharts'
const payIndex = ref(0)
const rangeTime = ref()
const chartData = ref({
    categories: ['08/16', '08/17', '08/18', '08/19', '08/20', '08/21'],
    series: [
        {
            name: '',
            data: [35, 36, 31, 33, 13, 34],
            color: '#3E5FF5'
        }
    ]
})
const optsChart = ref(uchartsOpts.optsChart)
const chartsDataPie1 = ref({
    series: [{
        data: [
            {
                name: '一班',
                value: 50,
                labelShow: false,
                labelText: false
            }, {
                name: '二班',
                value: 30,
                labelShow: false,
                labelText: false
            }, {
                name: '三班',
                value: 20,
                labelShow: false,
                labelText: false
            }, {
                name: '四班',
                value: 18,
                labelShow: false,
                labelText: '四'
            }, {
                name: '五班',
                value: 8,
                labelShow: false,
                labelText: '五',
                show: false
            }
        ]
    }]
})
const optsRing = ref(uchartsOpts.optsRing)
// tab发薪胶囊回调
const onPayTab = (index: number) => {
    payIndex.value = index
}
// 返回时间
const onRangeTime = (time:[string]) => {
    console.log(time)
}
// (() => {
//     console.log('1')
//     optsChart.value =
// })()
</script>
<style lang="scss" scoped>
.container {
    // min-height: 100vh;
    background: #fafafc;
    padding-bottom: 0;
}
.tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-radius {
    margin-top: 30rpx;
    padding: 0rpx 30rpx;
}
.scroll {
    height: 100vh;
}
.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;
    .record-i {
        padding: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
    }
    .info-row {
        display: flex;
    }
    .info-row-left {
        width: 138rpx;
        color: $grey;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
    .info-row-right {
        color: $black;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
}

.operate-box{
    padding: 30rpx;
}
.operate{
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    .operate-screen{
        .title{
            color: #202536;
            font-size: $font-normal;
        }
    }
    .screen-i{
        border-radius: 8rpx;
        border: 1rpx solid #DEE0E3;
        padding: 12rpx 15rpx;
        color: #565868;
        font-size: $font-base;
    }
    .drop-down{
        width: 22rpx;
        height: 20rpx;
    }
    .box-list{
        @include flex-between;
        flex-wrap: wrap;
        margin: 30rpx 0 30rpx 0;
    }
    .block-box-i{
        width: calc(100% / 2.3);
        background: #F4F4F7;
        padding: 23rpx 0 23rpx 30rpx;
        border-radius: 16rpx;
        .title{
            color: #565868;
            font-weight: bold;
        }
        .num{
            color: $black;
            font-weight: bold;
            font-size: $font-large;
            margin-top: 10rpx;
        }
        .company{
            font-size: $font-small;
        }
    }
    .block-box-i-active{
        flex: 1;
    }

}
.operate-top{
    margin: 30rpx 0;
    .operate-title{
        .title{
            color: $black;
            font-size: $font-normal;
        }
    }
    .operate-chart{
        margin-top: 52rpx;
        height: 400rpx;
    }
    .qiun-data-charts{
        height: 400rpx;
        width: 200rpx;
    }
    .qiun-data-charts-bg{
        background: #FAFAFC;
        margin-top: 30rpx;
        border-radius: 16rpx;
        padding: 10rpx 10rpx;
    }
    .operate-table{
        margin-top: 20rpx;
        .table-title{
            border: 16rpx 16rpx;
        }
        .title{
            width: calc(100% / 3);
            text-align: center;
            height: 88rpx;
            line-height: 88rpx;
            background: #F4F4F7;
        }
        .cell{
            width: calc(100% / 3);
            text-align: center;
            height: 88rpx;
            line-height: 88rpx;
            background: #FAFAFC;
            color: #565868;
        }
        .cell-active{
            display: flex;
            align-items: center;
        }
        .colour-block{
            background: #3E5FF5;
            border-radius: 4rpx;
            width: 16rpx;
            height: 16rpx;
            margin: 0 12rpx 0 30rpx;
        }
    }
}

</style>
